<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 差值绑定 -->
        <p>{{name}}</p>
        <!-- 指令解析 -->
        <p m-text="name"></p>
        <p>{{doubleAge}}</p>
        <p>{{age}}</p>
        <p><span>{{doubleAge}}</span></p>
        <input type="text" m-model="name" />
        <button @click="changename">改变数据</button>
        <div m-html="html"></div>
        <div>{{obj.a}}</div>
        <hr />
        <div m-for='item of fruitsData'>
            {{item}}
        </div>
    </div>
    <script src="./config/arrMethods.js"></script>
    <script src="utils/array.js"></script>
    <script src="./utils/operationObj.js"></script>
    <script src="./compile.js"></script>
    <script src="./mvue.js"></script>
    <script>
        const kaikeba = new MVue({
            el: '#app',
            data: {
                name: '马少东',
                age: 12,
                doubleAge: 24,
                html: '<button>这是一个按钮</button>',
                obj: {
                    a: 11111
                },
                fruitsData: ['香蕉', '苹果', '橘子', '草莓']
            },
            created() {
                setTimeout(() => {
                    // this.name = '我改变了';
                    // this.obj.a = 22222;
                    // this.fruitsData.push('鸭梨');
                    this.fruitsData.unshift('火龙果');
                    // this.fruitsData.splice(4, 1, '烤全羊');
                }, 1500)
            },
            methods: {
                changename() {
                    this.name = "哈喽，开课吧";
                    this.age = 1;
                    this.obj.a = 3333;
                }
            }
        })
    </script>
</body>

</html>